<template>
    <div>
        <section v-if="tableData.length > 0">
            <Form ref="formInline" :model="formInline" inline :label-width="80">
                <FormItem label="用户昵称:">
                    <Input type="text" v-model="formInline.nickname" placeholder="请输入用户昵称">
                    </Input>
                </FormItem>
                <FormItem label="用户邮箱:">
                    <Input type="text" v-model="formInline.mail" placeholder="请输入用户邮箱">
                    </Input>
                </FormItem>
                <FormItem label="身份">
                    <Select v-model="formInline.is_student" style="width:200px" placeholder="请选择身份">
                        <Option v-for="item in ['0','1']" :value="item" :key="item">{{ item === '0' ? '老师' : '学生'}}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="fetchData">搜索</Button>
                    <Button type="primary" @click="reset">重置</Button>
                </FormItem>
            </Form>
            <Table :loading="loading" border :columns="columns" :data="tableData">
                <template slot-scope="{ row }" slot="is_student">
                    <strong>{{ row.is_student === '1' ? '学生': '老师' }}</strong>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
                    <Button type="error" size="small" style="margin-right: 5px" @click="lahei(row)">{{row.status === 0 ? '已拉黑' : '拉黑'}}</Button>
                    <Button type="warning" size="small" @click="resetPwd(row)">重置密码</Button>
                </template>
            </Table>
            <section class="page">
                <Page :total="page.total"
                    :page-size="page.per_page"
                    :current="page.current_page"
                    show-total
                    @on-change="handlePage"></Page>
            </section>
        </section>
        <Modal
            v-model="modal6"
            title="编辑用户"
            :loading="Modalloading"
            @on-ok="asyncOK">
                <Form ref="formValidate" :model="formData" :rules="ruleValidate" :label-width="80">
                    <FormItem label="昵称" prop="nickname">
                        <Input v-model="formData.nickname" placeholder="请输入昵称"></Input>
                    </FormItem>
                    <FormItem label="身份" prop="is_student">
                        <RadioGroup v-model="formData.is_student">
                            <Radio label="0">老师</Radio>
                            <Radio label="1">学生</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="工号" prop="work_number" v-if="formData.is_student === '0'">
                        <Input v-model="formData.work_number"  placeholder="请输入工号"></Input>
                    </FormItem>
                    <FormItem label="学号" prop="number" v-else>
                        <Input v-model="formData.number"  placeholder="请输入学号"></Input>
                    </FormItem>
                    <FormItem label="邮箱" prop="mail">
                        <Input v-model="formData.mail"  placeholder="请输入邮箱"></Input>
                    </FormItem>
                    <!-- <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
                    </FormItem> -->
                </Form>
        </Modal>
        <Modal
            v-model="modal5"
            title="重置密码"
            :loading="Modal5loading"
            @on-ok="ok">
                <Form ref="formValidate" :model="formData" :rules="ruleValidate" :label-width="80">
                    <FormItem label="密码" prop="password">
                        <Input v-model="formData.password"  placeholder="请输入密码" type="password"></Input>
                    </FormItem>
                </Form>
        </Modal>
    </div>
</template>

<script>
  import merge from 'webpack-merge'
  import user from '../../api/article'
export default {    
    data() { 
      let emailRule = (rule, value, callback) => {
        if (!!value) {
          let reg =
            /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
          if (!reg.test(value)) {
            callback(new Error('请输入正确得邮箱号'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
        return{ 
            tableData: [],
            formData: {
                password: ''
            },
            loading: false,
            Modalloading: false,
            Modal5loading: false,
            modal5: false,
            modal6: false,
            columns: [
                {
                    title: 'ID',
                    key: 'id',
                    width: 80,
                    align: "center"
                },
                {
                    title: '账号',
                    align: 'center',
                    key: 'account',
                },
                {
                    title: '用户昵称',
                    align: 'center',
                    key: 'nickname'
                },
                {
                    title: '身份',
                    align: 'center',
                    slot: 'is_student',
                    key: 'is_student'
                },
                {
                    title: '学号',
                    align: 'center',
                    key: 'number'
                },
                {
                    title: '邮箱',
                    align: 'center',
                    key: 'mail'
                },
                {
                    title: '工号',
                    align: 'center',
                    key: 'work_number'
                },
                {
                    title: '创建时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 250,
                    align: 'center'
                }
            ],
            page: {},
            currentPage: 1,
            ruleValidate: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                work_number: [
                    { required: true, message: '请输入工号', trigger: 'blur' }
                ],
                number: [
                    { required: true, message: '请输入学号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { max: 36, min : 6 }
                ],
                mail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: "string", trigger: "blur", validator: emailRule },
                ],
            },
            formInline: {
                name: '',
                is_student: '',
                mail: ''
            },
        }
    },
    methods:{ 
        reset() { 
            this.formInline = { }
            this.fetchData()
        },
        // 切换分页
        handlePage(page) {
            this.$router.replace({
            query: merge(this.$route.query, {
                page
            })
            });
            this.currentPage = page;
            this.fetchData();
        },
        // 获取文章
        async fetchData() {
            try{ 
                this.loading = true
                const { data : res } = await user.getUserList({
                    page: this.currentPage,
                    ...this.formInline
                })
                if(res.code !== 200) return false
                this.tableData = res.data.data
                this.page = res.data.meta;
            }catch(e){
                console.log(e);
            }finally{ 
                this.loading = false
            }
        },
        resetPwd(val) { 
            this.formData = this._.cloneDeep(val)
            this.modal5 = true
        },
        async asyncOK () {
            try{
                const { is_student } = this.formData
                if(is_student === '0'){ 
                    this.$set(this.formData,'number','')
                }else{
                    this.$set(this.formData,'work_number','')
                }
                const { data : res} = await user.updateUser({
                    ...this.formData
                })
                if(res.code !== 200) return this.$Message.error(res.msg);
                this.modal6 = false
                this.fetchData()
            }catch(e) {
                console.log(e);
            }
        },
        async ok () {
            try{
                this.$set(this.formData,'pwd',this.formData.password)
                this.$delete(this.formData,'password')
                const { data : res} = await user.updateUser({
                    ...this.formData
                })
                if(res.code !== 200) return this.$Message.error(res.msg);
                this.$Message.success('密码修改成功');
                this.modal5 = false
                this.fetchData()
            }catch(e) {
                console.log(e);
            }
        },
        edit(val) { 
            this.modal6 = true
            this.formData = this._.cloneDeep(val)
            console.log(this.formData);
        },
        async lahei(val){
            try{ 
                const { status } = val
                const { data : res } = await user.supportUser({
                    ...val,
                    status: status === 1 ? 0 : 1
                })
                if(res.code !== 200)  return this.$Message.error(res.msg)
                this.fetchData()
            }catch(e){
                console.log(e);
            }
        }
    },
    created() {
        this.fetchData();
    },
}
</script>

<style scoped>
  .page {
    padding: 32px 0;
    text-align: center;
  }
</style>